<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.title"
        :placeholder="$t('email.templateName')"
        style="width: 200px"
        class="filter-item"
        size="small"
        clearable
      />
      <date-selector
        v-model="listQuery.createdAt"
        type="daterange"
        style="width: 300px; vertical-align: middle"
        value-format="yyyy-MM-dd"
      />
      <el-select
        v-model="listQuery.type"
        :placeholder="$t('common.type')"
        clearable
        style="width: 120px"
        class="filter-item"
        size="small"
      >
        <el-option
          v-for="item in templateList"
          :key="item.key"
          :label="item.label"
          :value="item.key"
        />
      </el-select>
      <el-select
        v-model="listQuery.attribute"
        :placeholder="$t('email.attributes')"
        clearable
        style="width: 120px"
        class="filter-item"
        size="small"
      >
        <el-option
          v-for="item in templateAttributeList"
          :key="item.key"
          :label="item.label"
          :value="item.key"
        />
      </el-select>
      <div style="display: inline-block; margin-right: 10px"></div>
      <el-button
        plain
        v-waves
        class="filter-item"
        type="primary"
        size="mini"
        icon="el-icon-search"
        @click="handleFilter"
      >
        {{ $t('table.search') }}
      </el-button>
      <el-button
        plain
        v-waves
        size="mini"
        :loading="downloadLoading"
        class="filter-item"
        type="success"
        icon="el-icon-download"
        @click="handleAddEdmTemplate"
      >
        {{ $t('email.createEDMTemplate') }}
      </el-button>
      <el-button
        size="small"
        class="filter-item right filter-left filter-refresh"
        icon="el-icon-refresh"
        type="primary"
        plain
        @click="refresh()"
      >
        {{ $t('common.refresh') }}
      </el-button>
    </div>
    <div class="tab-container">
      <el-tabs v-model="activeName" style="margin-top: 5px" type="border-card">
        <el-tab-pane
          v-for="item in tabMapOptions"
          :key="item.key"
          :label="item.label + '(' + 0 + ')'"
          :name="item.key"
        >
          <keep-alive>
            <tab-pane
              :ref="'templateTabPane' + item.key"
              v-if="activeName === item.key"
              :type="item.key"
              :get-list-query="listQuery"
              @create="showCreatedTimes"
            />
          </keep-alive>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script lang="ts">
import DateSelector from '@/components/Public/dateSelector.vue'
import { Component, Vue, Watch } from 'vue-property-decorator'
import TabPane from './TabPane.vue'
import AddEdmTemplate from './add.vue'
@Component({
  name: 'emailTemplateIndex',
  components: {
    DateSelector,
    TabPane,
    AddEdmTemplate,
  },
})
export default class extends Vue {
  /// ///////////////////////////////////////////////////////////////////
  public templateList = [
    // { label: '所有模板', key: '0' },
    { label: this.$t('route.emailTemplate'), key: '1' },
    { label: '落地页模板', key: '2' },
    { label: this.$t('email.otherTemplate'), key: '3' },
  ]

  public templateAttributeList = [
    // { label: '所有类型', key: '0' },
    { label: this.$t('email.private'), key: '1' },
    { label: this.$t('email.public'), key: '2' },
    { label: this.$t('email.shared'), key: '3' },
  ]

  public tabMapOptions = [
    { label: this.$t('email.myTemplate'), key: 'CN' },
    // { label: '推荐模板', key: 'US' },
    // { label: '分享给我的', key: 'JP' }
    // { label: 'Eurozone', key: 'EU' }
  ]

  private activeName = 'CN'

  private listQuery = {
    total: 0,
    page: 1,
    limit: 5,
    title: undefined,
    attribute: undefined,
    type: undefined,
    createdAt: undefined,
  }

  private downloadLoading = false

  created() {
    console.log('created')
  }

  private showCreatedTimes() {
    // this.createdTimes = this.createdTimes + 1
  }

  private async handleAddEdmTemplate() {
    this.$router.push('/email/emailTemplate/add')
  }

  private async handleFilter() {
    // $emit.this.listQuery = this.listQuery;
    const tmp: any = this.$refs.templateTabPaneCN
    tmp[0].getList()
    console.log('search')
  }

  private async refresh() {
    this.listQuery = {
      total: 0,
      page: 1,
      limit: 5,
      title: undefined,
      attribute: undefined,
      type: undefined,
      createdAt: undefined,
    }
    this.$nextTick(() => {
      const tmp: any = this.$refs.templateTabPaneCN
      tmp[0].getList()
    })
  }

  /// ///////////////////////////////////////////////////////////////////
  @Watch('activeName')
  private onActiveNameChange(value: string) {
    this.$router.push(`${this.$route.path}?tab=${value}`).catch((err) => {
      console.warn(err)
    })
  }
}
</script>

<style scoped>
.tab-container {
  margin: 0px 5px;
}
</style>
